<template>
  <div class="container">
    <div class="content">
      <div class="left">
        <div class="left-a">
          <div class="title">
            <div class="title-left">
              <span class="title-left-text">健康码统计</span>
            </div>
          </div>
          <div class="left-a-content">
            <div
              class="left-a-item"
              v-for="(data, index) in healthCodeData"
              :key="index"
            >
              <div class="icon" :style="{ 'background-color': data.color }">
                <i
                  class="el-icon-user"
                  v-if="data.healthCodeName == '总数'"
                ></i>
                <i
                  class="iconfont icon-Union-16"
                  v-else
                  style="font-size: 48px"
                ></i>
              </div>
              <div class="info">
                <div class="info-label" :style="{ color: data.color }">
                  {{ data.num }}
                </div>
                <div class="info-value">{{ data.healthCodeName }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="left-b">
          <div class="title">
            <div class="title-left">
              <span class="title-left-text">体温统计</span>
              <span
                style="
                  margin-left: 10px;
                  font-size: 13px;
                  font-weight: 400;
                  color: rgb(245, 108, 108);
                "
                >大于37.2℃视为异常</span
              >
            </div>
          </div>
          <div class="left-b-content">
            <div id="chartKeyA" style="height: 100%; width: 100%" />
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="middle-a">
          <div class="title">
            <div class="title-left">
              <span class="title-left-text">
                <!-- 访客来源 -->
                人员归属地
              </span>
            </div>
            <div
              style="
                width: calc(100% - 100px);
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <span> 其他：</span>
              <span
                style="
                  color: rgb(64, 158, 255);
                  font-size: 16px;
                  font-family: Microsoft YaHei;
                  font-weight: bold;
                "
                >{{ visitorSourceOtherData.num }}</span
              >
            </div>
          </div>
          <div class="middle-a-content">
            <div id="chartKeyC" style="height: 100%; width: 100%" />
          </div>
        </div>
        <div class="middle-b">
          <div class="title" style="padding: 4px 12px">
            <div class="title-left">
              <span class="title-left-text">人流量统计</span>
            </div>
            <div class="title-right">
              <div style="flex: 1">
                <el-select
                  v-model="visitorsFlowrateSearch.groupType"
                  size="mini"
                  @change="groupTypeChange"
                >
                  <el-option
                    v-for="item in groupTypeList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div style="flex: 1; margin-left: 10px">
                <el-select
                  v-model="visitorsFlowrateSearch.intervals"
                  size="mini"
                  @change="intervalsChange"
                >
                  <el-option
                    v-for="item in intervalsList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="middle-b-content">
            <div id="chartKeyB" style="height: 100%; width: 100%" />
          </div>
        </div>
      </div>
      <div class="right">
        <div class="title">
          <div style="width: 100px">
            <span class="title-left-text">
              <!-- 访客记录 -->
              通行记录
            </span>
          </div>
          <!-- <div style="flex: 1; display: flex">
            <div style="flex: 1">
              <el-select
                v-model="visitorsRecordSearch.placeName"
                size="mini"
                @change="getVisitorsRecordData"
              >
                <el-option
                  v-for="item in placeList"
                  :key="item.value"
                  :label="item.placeName"
                  :value="item.value"
                />
              </el-select>
            </div>
            <div style="flex: 1; margin-left: 10px">
              <el-select
                v-model="visitorsRecordSearch.deviceName"
                size="mini"
                @change="getVisitorsRecordData"
              >
                <el-option
                  v-for="item in deviceList"
                  :key="item.value"
                  :label="item.deviceName"
                  :value="item.value"
                />
              </el-select>
            </div>
          </div> -->
        </div>
        <div class="search-box" id="searchBox">
          <div class="search-place">
            选择场所：
            <el-select
              v-model="visitorsRecordSearch.placeName"
              placeholder="选择场所"
              size="mini"
              filterable
              clearable
              style="width: calc(100% - 80px)"
              @change="onPlaceNameChange"
            >
              <el-option
                v-for="item in placeList"
                :key="item.value"
                :label="item.placeName"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="search-place">
            选择设备：
            <el-select
              v-model="deviceNames"
              placeholder="选择设备"
              size="mini"
              filterable
              clearable
              multiple
              style="width: calc(100% - 80px)"
              @change="onDeviceNamesChange"
            >
              <el-option
                v-for="item in deviceList"
                :key="item.value"
                :label="item.deviceName"
                :value="item.value"
              />
            </el-select>
          </div>
        </div>
        <div
          class="right-content"
          id="rightContent"
          :style="{ height: `calc(100% - 46px - ${searchBoxHeight}px)` }"
        >
          <div
            class="right-item"
            v-for="(data, index) in visitorsRecordData"
            :key="index"
            :style="{
              background: index % 2 == 0 ? 'white' : ' #f8f8f8',
            }"
          >
            <div class="head-portrait">
              <img
                :src="data.facecapture"
                style="height: 130px; width: 130px"
              />
            </div>
            <div class="info">
              <div class="name-info">{{ data.name }}</div>
              <div class="id-number-info">{{ data.sfzh }}</div>
              <div class="code-info">
                <el-tag
                  size="medium"
                  :style="
                    data.healthCode | constantKeyTagStyleObj('HEALTH_CODE')
                  "
                  style="margin-right: 5px"
                >
                  {{ data.healthCode | constantKeyValue('HEALTH_CODE') }}
                </el-tag>

                <el-tag
                  size="medium"
                  :type="data.temperature < 37.2 ? 'success' : 'warning'"
                  style="margin-right: 5px"
                >
                  {{ data.temperature }}℃
                </el-tag>

                <el-tag
                  size="medium"
                  :style="
                    data.nucleicAcidResult
                      | constantKeyTagStyleObj('NUCLEIC_ACID_RESULT')
                  "
                  v-if="data.nucleicAcidResult != null"
                >
                  {{
                    data.nucleicAcidResult
                      | constantKeyValue('NUCLEIC_ACID_RESULT')
                  }}
                </el-tag>
              </div>
              <div class="time-info">
                {{ data.inOutTime | datefmt('YYYY-MM-DD HH:mm:ss') }}
                <!-- {{ data.placeName }} -->
              </div>
              <div class="time-info">
               场所：{{ data.placeName }}
              </div>
              <div class="time-info">
               设备：{{ data.deviceName }}
              </div>
            </div>
          </div>
          <div
            v-if="visitorsRecordData.length == 0"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              height: 100%;
              font-size: 20px;
            "
          >
            无访客记录数据。
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import EpidemicPreventionManageApi from '@/api/epidemic-prevention-manage'
import echarts from 'echarts'
const appEl = document.querySelector('#app')

export default {
  name:'EpidemicPreventionHome',
  data() {
    return {
      healthCodeData: [], // 健康码统计
      temperatureData: [], // 体温统计
      visitorSourceData: [], // 访客来源
      visitorSourceOtherData: {},
      visitorsFlowrateData: {}, // 人流量统计
      visitorsRecordData: [], // 访客记录
      sourceVisitorsRecordData: [],
      alertInfoData: {},

      groupTypeList: [
        {
          label: '按设备',
          value: 1,
        },
        {
          label: '按场所',
          value: 2,
        },
      ],
      intervalsList: [
        {
          label: '当日',
          value: 24,
          type: 0,
        },
        {
          label: '近7天',
          value: 7,
          type: 1,
        },
        {
          label: '近15天',
          value: 15,
          type: 1,
        },
        {
          label: '近1个月',
          value: 30,
          type: 1,
        },
        {
          label: '近3个月',
          value: 3,
          type: 2,
        },
        {
          label: '近6个月',
          value: 6,
          type: 2,
        },
      ],
      visitorsFlowrateSearch: {
        groupType: 1,
        type: 0,
        intervals: 24,
      },
      chartA: null,
      chartB: null,
      chartC: null,

      dictCodeToShortName: {
        '00': '其他',
        23: '黑龙江',
        52: '贵州',
        71: '台湾',
        11: '北京',
        31: '上海',
        42: '湖北',
        53: '云南',
        81: '香港',
        12: '天津',
        32: '江苏',
        43: '湖南',
        54: '西藏',
        82: '澳门',
        13: '河北',
        33: '浙江',
        44: '广东',
        61: '陕西',
        14: '山西',
        34: '安徽',
        45: '广西',
        62: '甘肃',
        15: '内蒙古',
        35: '福建',
        46: '海南',
        63: '青海',
        21: '辽宁',
        36: '江西',
        50: '重庆',
        64: '宁夏',
        22: '吉林',
        37: '山东',
        51: '四川',
        65: '新疆',
      },

      placeList: [],
      deviceList: [],
      visitorsRecordSearch: {
        placeName: '',
        deviceName: '',
      },

      deviceNames: [],

      searchBoxHeight: 76,
    }
  },
  computed: {
    healthCodeStatisticsData() {
      return this.$store.state.global.healthCodeStatisticsData
    },
    temperatureStatisticsData() {
      return this.$store.state.global.temperatureStatisticsData
    },
    visitorSourceStatisticsData() {
      return this.$store.state.global.visitorSourceStatisticsData
    },
    visitorsRecordStatisticsData() {
      return this.$store.state.global.visitorsRecordStatisticsData
    },
    alertInfoStatisticsData() {
      return this.$store.state.global.alertInfoStatisticsData
    },
  },
  watch: {
    healthCodeStatisticsData: {
      handler(e) {
        // console.log('healthCodeStatisticsData=', e)
        this.getHealthCodeData(e)
      },
    },

    temperatureStatisticsData: {
      handler(e) {
        // console.log('temperatureStatisticsData=', e)
        this.temperatureData = e
        this.updateTemperatureStatisticsChartOption()
      },
    },
    visitorSourceStatisticsData: {
      handler(e) {
        // console.log('visitorSourceStatisticsData=', e)
        this.visitorSourceData = e
        this.formatterVisitorSourceData()
      },
    },
    visitorsRecordStatisticsData: {
      handler(e) {
        console.log('visitorsRecordStatisticsData=', e)
        // this.visitorsRecordData = e
        // this.sourceVisitorsRecordData = e
        // this.getVisitorsRecordData()

        if (
          this.visitorsRecordSearch.placeName == '' &&
          this.deviceNames.length == 0
        ) {
          this.visitorsRecordData.unshift(e[0])
        } else {
          let tempFilter = {}
          for (const key in this.visitorsRecordSearch) {
            tempFilter[key] = this.visitorsRecordSearch[key]
          }

          let flag = false
          for (const key in tempFilter) {
            let str = ''
            let searchValue = ''
            console.log('key=', key)
            if (key == 'deviceName') {
              str = this.deviceNames.toString()
              searchValue = e[0][key]
            } else {
              str = e[0][key]
              searchValue = tempFilter[key]
            }
            console.log('str=', str)
            console.log('searchValue=', searchValue)
            if (str.indexOf(searchValue) >= 0) {
              flag = true
            } else {
              flag = false
              break
            }
          }
          if (flag) {
            this.visitorsRecordData.unshift(e[0])
          }
        }

        setTimeout(() => {
          if (document.getElementById('rightContent')) {
            document.getElementById('rightContent').scrollTop = 0
          }
        }, 10)
      },
    },
    alertInfoStatisticsData: {
      handler(e) {
        console.log('alertInfoStatisticsData=', e)
        if (e.tipMsg !== '') {
          this.alertInfoData = e
          this.handleSpeak()
        }
      },
    },
  },
  activated() {
    this.getData()
    // this.getVisitorsFlowrateStatistics() // 人流量统计
  },
  mounted() {
    const THIS = this
    appEl.setAttribute('isdotts', 0)
    appEl.onclick = function (e) {
      const isdotts = appEl.getAttribute('isdotts')
      if (isdotts === '1') {
        THIS.doTTS()
        appEl.setAttribute('isdotts', 0)
      }
    }

    this.$nextTick(() => {
      this.chartA = this.getChart('chartKeyA')
      this.chartB = this.getChart('chartKeyB')
      this.chartC = this.getChart('chartKeyC')
      // this.chartC = echarts.init(document.getElementById('chartKeyC'), null, {
      //   renderer: 'canvas',
      //   useDirtyRect: false,
      // })
    })
    this.getData()

    this.getPlaceList()
    this.getDeviceList()
  },

  methods: {
    doTTS() {
      var msg = new SpeechSynthesisUtterance(this.alertInfoData.tipMsg)
      msg.volume = 100
      msg.rate = 1
      msg.pitch = 1.5
      window.speechSynthesis.speak(msg)
    },
    handleSpeak() {
      // this.audio = new Audio()
      // this.audio.src = require('@/assets/aduio/huojing.mp3')
      // this.audio.play()
      setTimeout(() => {
        appEl.setAttribute('isdotts', 1)
        appEl.click()
      }, 1000)
    },
    getChart(id) {
      if (document.getElementById(id)) {
        return echarts.init(document.getElementById(id))
      }
      return null
    },
    createChart(charts, option) {
      // const charts = echarts.init(document.getElementById(createId))
      charts.setOption(option)
      window.addEventListener('resize', () => {
        charts.resize()
      })
    },

    getPlaceList() {
      EpidemicPreventionManageApi.getAllPlaces().then((res) => {
        if (res.data.code == 200) {
          this.placeList = res.data.data
          this.placeList.forEach((ele) => {
            ele.value = ele.placeName
          })
          // this.placeList.unshift({
          //   placeName: '全部场所',
          //   value: '',
          // })
        }
      })
    },
    getDeviceList() {
      EpidemicPreventionManageApi.getAllDevice().then((res) => {
        if (res.data.code == 200) {
          this.deviceList = res.data.data
          this.deviceList.forEach((ele) => {
            ele.value = ele.deviceName
          })
          // this.deviceList.unshift({
          //   deviceName: '全部设备',
          //   value: '',
          //   disabled: false,
          // })
        }
      })
    },

    getData() {
      this.getHealthCodeStatistics() // 健康码统计
      this.getTemperatureStatistics() // 体温统计
      this.getVisitorSourceData() // 访客来源
      this.getVisitorsFlowrateStatistics() // 人流量统计
      this.getVisitorsRecord() // 访客记录
    },

    // 健康码统计
    getHealthCodeStatistics() {
      EpidemicPreventionManageApi.getHealthCodeStatistics().then((ret) => {
        if (ret.data.code == 200) {
          const list = ret.data.data
          this.getHealthCodeData(list)
        }
      })
    },
    getHealthCodeData(list) {
      const dataList = []
      list.forEach((ele) => {
        dataList.push(ele)
      })
      const totalObj = {
        healthCodeName: '总数',
        healthCode: '-1',
        num: 0,
        color: 'rgb(64, 158, 255)',
      }
      dataList.forEach((ele) => {
        totalObj.num = totalObj.num + ele.num
        if (ele.healthCode == '0') {
          ele.color = 'rgb(103, 194, 58)'
        } else if (ele.healthCode == '1') {
          ele.color = 'rgb(230, 162, 60)'
        } else if (ele.healthCode == '2') {
          ele.color = 'rgb(245, 108, 108)'
        }
      })
      dataList.unshift(totalObj)
      this.healthCodeData = dataList
    },

    // 体温统计
    getTemperatureStatistics() {
      EpidemicPreventionManageApi.getTemperatureStatistics().then((ret) => {
        if (ret.data.code == 200) {
          this.temperatureData = ret.data.data
          this.updateTemperatureStatisticsChartOption()
        }
      })
    },
    updateTemperatureStatisticsChartOption() {
      const xAxisData = ['体温异常', '体温正常']
      const yAxisData = []
      this.temperatureData.forEach((ele) => {
        yAxisData.push(ele.warning)
        yAxisData.push(ele.normal)
      })
      console.log(yAxisData)

      const colorStops = [
        [
          { offset: 0, color: 'rgb(245, 108, 108)' },
          { offset: 0.7, color: '#F1B5B4' },
          { offset: 1, color: '#f3d8d7' },
        ],
        [
          { offset: 0, color: 'rgb(103, 194, 58)' },
          { offset: 0.7, color: '#90CEA2' },
          { offset: 1, color: '#d6f5df' },
        ],
      ]

      const data = []
      xAxisData.forEach((ele, idx) => {
        const itemStyle = {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: colorStops[idx],
            globalCoord: false, // 缺省为 false
          },
        }
        data.push({
          name: ele,
          value: yAxisData[idx],
          label: {
            normal: {
              show: true,
              // color: 'red',
              color: colorStops[idx][0].color,
              fontSize: 13,
              formatter: '{b}' + '\n' + '{c}({d}%)',
            },
          },
          itemStyle: itemStyle,
        })
      })

      var chartOption = {
        tooltip: {
          trigger: 'item',
          // formatter: '{b}<br />' + seriesName + '：{c}%'
        },
        legend: {
          show: true,
          left: 'left',
          top: 5,
          padding: [5, 30, 0, 0],
          data: xAxisData,
          orient: 'vertical',
        },
        title: {
          text:
            this.temperatureData[0].warning + this.temperatureData[0].normal,
          subtext: '总数',
          left: 'center',
          top: 'center',
          textStyle: {
            fontSize: 20,
            lineHeight: 20,
          },
          subtextStyle: {
            fontSize: 15,
            color: '#555555',
          },
          itemGap: 2,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '1%',
          top: 5, // 65 60 30
          containLabel: true,
        },
        series: [
          {
            name: '体温统计',
            type: 'pie',
            radius: ['35%', '65%'], // ['23%', '45%'] 45%
            avoidLabelOverlap: false,
            labelLine: {
              show: true,
            },
            data: data,
          },
        ],
      }
      if (this.chartA) {
        this.chartA.dispose()
      }
      this.$nextTick(() => {
        if (this.getChart('chartKeyA')) {
          this.chartA = this.getChart('chartKeyA')
          this.createChart(this.chartA, chartOption)
        }
      })
    },

    // 访客来源
    getVisitorSourceData() {
      EpidemicPreventionManageApi.getVisitorSource().then((ret) => {
        if (ret.data.code == 200) {
          this.visitorSourceData = ret.data.data
          this.formatterVisitorSourceData()
        }
      })
    },
    formatterVisitorSourceData() {
      this.visitorSourceData.forEach((ele) => {
        if (ele.name == '其他') {
          this.visitorSourceOtherData = ele
        }
      })

      // this.visitorSourceData.sort((a, b) => {
      //   const result = a.num - b.num
      //   return result
      // })

      this.updateVisitorSourceChartOption()
    },
    updateVisitorSourceChartOption() {
      const geoJson = this.getGeoJson('全国')
      echarts.registerMap('全国', geoJson)
      // console.log('this.visitorSourceData=', this.visitorSourceData)
      const data = []
      this.visitorSourceData.forEach((ele) => {
        data.push({
          name: this.dictCodeToShortName[ele.code],
          value: ele.num,
        })
      })
      var option = {
        tooltip: {
          trigger: 'item',
          // formatter: '{b}<br/>{c} (p / km2)',
        },

        // visualMap: {
        //   min: this.visitorSourceData[0].value,
        //   max: this.visitorSourceData[this.visitorSourceData.length - 1].value,
        //   text: ['高', '低'],
        //   // realtime: false,
        //   // calculable: true,
        //   inRange: {
        //     color: ['lightskyblue', 'yellow', 'orangered'],
        //   },
        // },
        series: [
          {
            name: '访客来源',
            type: 'map',
            map: '全国',
            zoom: 1.7,
            center: [103, 35.5],
            roam: true,
            label: {
              show: true,
              color: '#000a3c',
              formatter(params) {
                if (params.data) {
                  // return params.name + '\n' + params.data.value
                  return (
                    params.name + '\n' + '{areaValue|' + params.data.value + '}'
                  )
                }
              },
              rich: {
                areaValue: {
                  textShadowBlur: 2,
                  textShadowColor: 'rgba(25, 137, 225, 0.7)',
                  textShadowOffsetX: 1,
                  textShadowOffsetY: 1,
                  padding: [1, 1, 1, 1],
                },
              },
            },
            itemStyle: {
              // 区域样式
              areaColor: {
                type: 'radial',
                x: 1,
                y: 1,
                r: 3,
                colorStops: [
                  { offset: 0, color: 'rgba(223, 231, 242, 0.9)' },
                  { offset: 1, color: 'rgba(2, 99, 206, 0.8)' },
                ], // 区域颜色
                globalCoord: false, // 缺省为 false
              },
              borderWidth: 1, // 边框大小
              borderColor: 'rgba(104, 152, 190, 1)', // 边框颜色
              // shadowColor: getShadowColor(), // 阴影颜色
              // shadowOffsetX: getShadowOffsetX(), // 阴影水平方向上的偏移距离
              // shadowOffsetY: getShadowOffsetY(), // 阴影垂直方向上的偏移距离
              // shadowBlur: getShadowBlur(), // 文字块的背景阴影长度
            },
            // 选中状态下样式
            emphasis: {
              // label: {
              //   color:"#ffffff",
              // },
              itemStyle: {
                areaColor: '#a5d4fe',
              },
            },
            data: data,
            // 自定义名称映射
          },
        ],
      }

      this.chartC.setOption(option)
    },
    getGeoJson(name) {
      return require(`@/assets/json/${name}.json`)
    },

    // 人流量统计
    getVisitorsFlowrateStatistics() {
      EpidemicPreventionManageApi.getVisitorsFlowrateStatistics(
        this.visitorsFlowrateSearch
      )
        .then((ret) => {
          if (ret.data.code == 200) {
            this.visitorsFlowrateData = ret.data.data
            this.updateVisitorsFlowratStatisticsChartOption()
          }
        })
        .catch((err) => {})
    },
    updateVisitorsFlowratStatisticsChartOption() {
      const xAxisData = {
        xAxis: [],
      }
      let yAxisData = {}
      let legendData = []
      this.visitorsFlowrateData.forEach((ele) => {
        if (ele.unit && ele.unit != '_') {
          const name =
            ele.unit.indexOf('_') > -1 ? ele.unit.split('_')[1] : ele.unit
          ele.name = name

          if (!xAxisData.xAxis.find((item) => item == ele.date)) {
            xAxisData.xAxis.push(ele.date)
          }

          if (!legendData.find((item) => item.name == ele.name)) {
            legendData.push({
              name: ele.name,
            })
          }
        }
      })

      legendData.forEach((ele) => {
        const valueList = []
        this.visitorsFlowrateData.forEach((item) => {
          if (ele.name == item.name) {
            valueList.push(item.num)
          }
        })
        yAxisData[ele.name] = valueList
      })

      for (const key in yAxisData) {
        if (yAxisData[key].length != xAxisData.xAxis.length) {
          const arr = []
          for (
            let i = 0;
            i < xAxisData.xAxis.length - yAxisData[key].length;
            i++
          ) {
            arr.push(0)
          }
          yAxisData[key] = yAxisData[key].concat(arr)
        }
      }

      let seriesData = []
      legendData.forEach((ele, idx) => {
        const itemData = yAxisData[ele.name]
        console.log('itemData=', itemData)
        seriesData.push({
          name: ele.name,
          type: 'line',
          data: itemData,
          smooth: true,
          lineStyle: {
            width: 2,
            // shadowColor: ele.shadowColor,
            // shadowBlur: 10,
            // shadowOffsetX: 3,
            // shadowOffsetY: 5,
          },
          // itemStyle: {
          //   color: ele.pageIconColor,
          // },
          // areaStyle: {
          //   color: {
          //     type: 'linear',
          //     x: 0,
          //     y: 0,
          //     x2: 0,
          //     y2: 1,
          //     colorStops: [
          //       { offset: 0, color: 'rgba(27, 184, 250, 0)' },
          //       { offset: 1, color: 'rgba(72, 134, 255, 0.2)' },
          //     ],
          //     globalCoord: true, // 缺省为 false
          //   },
          // },
          label: {
            normal: {
              show: true,
              position: 'top',
              // color: ele.pageIconColor,
              distance: 2,
            },
          },
        })
      })

      var chartOption = {
        tooltip: {
          trigger: 'axis',
          // axisPointer: {
          //   type: 'line',
          // },
        },
        grid: {
          left: '3%',
          right: '50px',
          bottom: '5%',
          top: '15%',
          containLabel: true,
        },
        legend: {
          left: 'right',
          padding: [2, 10, 2, 10],
          data: legendData,
          itemHeight: 13,
        },
        xAxis: {
          type: 'category',
          data: xAxisData.xAxis,
          boundaryGap: false,
          axisTick: {
            alignWithLabel: true,
          },
          axisLabel: {
            interval: 0,
            fontSize: 13,
            // rotate: '45'
          },
        },
        yAxis: [
          {
            type: 'value',
            min: 0,

            max: 'dataMax',
            position: 'left',
            axisLine: {
              lineStyle: {
                color: '#999',
              },
            },
            axisLabel: {
              formatter: '{value}',
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed',
              },
            },
          },
        ],
        series: seriesData,
      }
      if (this.chartB) {
        this.chartB.dispose()
      }
      this.$nextTick(() => {
        this.chartB = this.getChart('chartKeyB')
        this.createChart(this.chartB, chartOption)
      })
    },
    groupTypeChange() {
      // console.log('groupTypeChange>>', this.visitorsFlowrateSearch)
      this.getVisitorsFlowrateStatistics()
    },
    intervalsChange() {
      this.intervalsList.forEach((ele) => {
        if (ele.value == this.visitorsFlowrateSearch.intervals) {
          this.visitorsFlowrateSearch.type = ele.type
        }
      })
      this.getVisitorsFlowrateStatistics()
    },

    // 访客记录
    getVisitorsRecord() {
      EpidemicPreventionManageApi.getVisitorsRecord().then((ret) => {
        if (ret.data.code == 200) {
          this.visitorsRecordData = ret.data.data.rows
          // this.sourceVisitorsRecordData = ret.data.data.rows
          // this.getVisitorsRecordData()
        }
      })
    },
    getVisitorsRecordData() {
      const objIsEmpty =
        this.visitorsRecordSearch.placeName == '' &&
        this.visitorsRecordSearch.deviceName == ''

      if (objIsEmpty) {
        this.visitorsRecordData = this.sourceVisitorsRecordData
      } else {
        let tempFilter = {}
        for (const key in this.visitorsRecordSearch) {
          tempFilter[key] = this.visitorsRecordSearch[key]
        }
        this.visitorsRecordData = this.sourceVisitorsRecordData.filter(
          (item) => {
            let flag = false
            for (const key in tempFilter) {
              if (item[key].indexOf(tempFilter[key]) >= 0) {
                flag = true
              } else {
                flag = false
                break
              }
            }
            if (flag) {
              return item
            }
          }
        )
      }

      setTimeout(() => {
        document.getElementById('rightContent').scrollTop = 0
      }, 10)
    },
    onPlaceNameChange() {},
    onDeviceNamesChange() {
      setTimeout(() => {
        this.searchBoxHeight = document.getElementById('searchBox').clientHeight
      }, 0)
    },
    onVisibleChange(event) {
      // console.log('event=', event)
      // if (event) {
      //   if (this.deviceNames.length == 0) {
      //     this.deviceNames = ['']
      //   }
      // }
      // if(this.deviceNames.length ==0) {
      // }
    },
  },
}
</script>

<style lang="scss" scoped>
@import './style/home-page.scss';
</style>